<template>
  <div class="title">
    交通信息
    <span class="close" @click="closeHandler">X</span>
  </div>
  <ul class="travel-box">
    <li><span class="ttt">事件名称:</span><span>{{ data.name }}</span></li>
    <li><span class="ttt">位置坐标:</span><span>{{ data.position }}</span></li>
    <li><span class="ttt">事件类型:</span><span>{{ typeAll[data.type].title }}</span></li>
    <li><span class="ttt">发生时间:</span><span>{{ data.time }}</span></li>
    <li><span class="ttt">事件描述:</span><span>{{ data.desc }}</span></li>
  </ul>
</template>

<script setup>
import {defineProps, ref} from 'vue'
import {GlobalVariables} from "../../GlobalVariables";

const props = defineProps(["data", "typeAll"])
const size = ref("")

function closeHandler() {
  GlobalVariables.map.clearInfoWindow();
}
</script>

<style scoped lang="less">
.title {
  position: relative;
  top: 0;
  left: 0;
  font-size: 0.2rem;
  padding: 0.1rem 0 0.1rem 0.2rem;
  background-color: #1f2e2f;

  .navigation-to-local {
    border-radius: 0.05rem;
    font-size: 0.16rem;
    padding: 0.03rem 0.1rem;
    position: absolute;
    top: 0.1rem;
    right: 0.4rem;
    cursor: pointer;
    background-color: #d1d333;
    color: #000;
  }

  .close {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    cursor: pointer;

    &:hover {
      color: #ff0981;
    }
  }
}

.travel-box {
  width: 4rem;
  background-color: #304a4f;
  padding-bottom: 0.03rem;

  li {
    padding: 0.1rem 0.05rem;
    display: flex;
    align-items: center;
    border-bottom: 0.01rem solid #1f2e2f;

    span {
      flex: 1;
      text-align: center;
      border-right: 0.01rem solid #1f2e2f;

      &:last-child {
        border-right: 0.01rem solid transparent;
      }

      &.ttt {
        font-size: 0.16rem;
      }
    }

  }
}
</style>